<script setup lang="ts">
  import { MinusOutlined, PlusOutlined } from '@ant-design/icons-vue';
  import { ref, h, reactive, computed } from 'vue';
  import eChart from '/@/components/e-chart.vue';

  const options = reactive([
    {
      value: 'a1',
      label: 'a1',
    },
    {
      value: 'a2',
      label: 'a2',
    },
  ]);

  const layout = {
    labelCol: { span: 3 },
    wrapperCol: { span: 12 },
  };

  const formState = reactive({
    power: '',
    accumulatedConsumption: '',
    accumulatedIncome: '',
  });

  const option1 = computed(() => {
    return {
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
      },
      grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: 'Email',
          type: 'line',
          stack: 'Total',
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: 'Union Ads',
          type: 'line',
          stack: 'Total',
          data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
          name: 'Video Ads',
          type: 'line',
          stack: 'Total',
          data: [150, 232, 201, 154, 190, 330, 410],
        },
        {
          name: 'Direct',
          type: 'line',
          stack: 'Total',
          data: [320, 332, 301, 334, 390, 330, 320],
        },
        {
          name: 'Search Engine',
          type: 'line',
          stack: 'Total',
          data: [820, 932, 901, 934, 1290, 1330, 1320],
        },
      ],
    };
  });
  const option2 = computed(() => {
    return {
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
      },
      grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: 'Email',
          type: 'line',
          stack: 'Total',
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: 'Union Ads',
          type: 'line',
          stack: 'Total',
          data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
          name: 'Video Ads',
          type: 'line',
          stack: 'Total',
          data: [150, 232, 201, 154, 190, 330, 410],
        },
        {
          name: 'Direct',
          type: 'line',
          stack: 'Total',
          data: [320, 332, 301, 334, 390, 330, 320],
        },
        {
          name: 'Search Engine',
          type: 'line',
          stack: 'Total',
          data: [820, 932, 901, 934, 1290, 1330, 1320],
        },
      ],
    };
  });
  const option3 = computed(() => {
    return {
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
      },
      grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: 'Email',
          type: 'line',
          stack: 'Total',
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: 'Union Ads',
          type: 'line',
          stack: 'Total',
          data: [220, 182, 191, 234, 290, 330, 310],
        },
        {
          name: 'Video Ads',
          type: 'line',
          stack: 'Total',
          data: [150, 232, 201, 154, 190, 330, 410],
        },
        {
          name: 'Direct',
          type: 'line',
          stack: 'Total',
          data: [320, 332, 301, 334, 390, 330, 320],
        },
        {
          name: 'Search Engine',
          type: 'line',
          stack: 'Total',
          data: [820, 932, 901, 934, 1290, 1330, 1320],
        },
      ],
    };
  });
</script>

<template>
  <div class="container">
    <a-row :gutter="[10, 10]">
      <a-col :span="12">
        <a-card title="充电桩监测">
          <a-form v-bind="layout" :model="formState">
            <div class="first">
              <a-form-item label="充电桩功率" name="power">
                <a-input v-model:value="formState.power" style="width: 320px" />
              </a-form-item>
            </div>

            <a-divider style="height: 1px"></a-divider>
            <a-form-item label="累计用电量" name="accumulatedConsumption">
              <a-input v-model:value="formState.accumulatedConsumption" style="width: 320px" />kWh
            </a-form-item>
            <a-form-item label="累计收益" name="accumulatedPowerGeneration">
              <a-input v-model:value="formState.accumulatedIncome" style="width: 320px" />元
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="日用电趋势柱状图">
          <div class="chart">
            <eChart :option="option1" name="option1" />
          </div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="月用电趋势柱状图">
          <div class="chart">
            <eChart :option="option2" name="option2" />
          </div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card title="年用电趋势柱状图">
          <div class="chart">
            <eChart :option="option3" name="option3" />
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<style scoped>
  .condition {
    margin: 10px 0;
    display: flex;
    align-items: center;
    span {
      margin: 0 10px;
    }
  }
  .ant-card {
    width: 100%;
    min-height: 505px;
  }
  .chart {
    width: 100%;
    height: 400px;
  }

  :deep(.ant-form-item-control-input-content) {
    display: flex;
    align-items: center;
    .ant-input {
      width: 350px;
    }
  }
  .first {
    margin: 10px 0 20px 0;
  }
</style>
